<template>
  <div>
    <div class="bg">
      <van-image :src="require('../../assets/img/my/teamLeaderBg.png')" fit="cover" />
    </div>
    <div class="title">

      <div class="leftIcon">
        <van-image :src="require('../../assets/img/my/titleIcon.png')" fit="cover" />
      </div>
      <div class="text">申请成为团长</div>
      <div class="rightIcon">
        <van-image :src="require('../../assets/img/my/titleIcon.png')" fit="cover" />
      </div>
    </div>
    <van-form @submit="onSubmit">
      <div class="formBox">
        <div class="title">姓名</div>

        <van-field required :rules="[{ pattern, message: '请输入正确内容' }]" v-model="form.user_name" placeholder="请输入姓名" class="field" />
        <div class="title">电话</div>
        <van-field required :rules="[{ pattern:phonePattern, message: '请输入正确内容' }]" v-model="form.telphone" placeholder="请输入电话号码" class="field" />
        <div class="title">邮箱</div>
        <van-field required :rules="[{ pattern:emailPattern, message: '请输入正确内容' }]" v-model="form.email" placeholder="请输入邮箱" class="field" />

      </div>
    </van-form>
    <div class="submitBtn">
      <van-button type="primary" @click="submit" round color="#FF7733" native-type="submit">立即申请</van-button>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';

export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      form: {},
      pattern: /^[\u4e00-\u9fa5]{0,}$/,
      phonePattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      emailPattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,

    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {

  },
  methods: {
    //提交申请数据
    submit () {
      let { user_name, telphone, email } = this.form
      if (user_name && telphone && email) {
        this.$axios.post(this.$api.ApplyBeSales, {
          user_name, telphone, email
        }).then((res) => {

          if (res.data.code == 1) {

            this.$router.push({ name: 'submitSucess' })

          } else {
            Toast.fail(res.msg);
          }

        })
      } else {
        Toast.fail('您漏填了资料，请检查是否有漏填');
      }
    },

  }
};
</script>
<style lang='less' scoped>
.bg {
  .van-image {
    width: 100%;
    height: 167px;
  }
}
.title {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  .leftIcon {
    .van-image {
      width: 15px;
      height: 9px;
    }
  }
  .text {
    margin: 0 20px;
    font-size: 20px;

    color: #db1b1b;
  }
  .rightIcon {
    transform: rotateY(180deg);
    width: 15px;
    height: 9px;
  }
}
.formBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    width: 335px;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;
    font-size: 14px;
    color: rgba(16, 13, 13, 0.6);
  }
  .field {
    width: 343px;

    background: rgba(16, 13, 13, 0.03);
    border-radius: 16px;
  }
}
.submitBtn {
  width: 100%;
  position: fixed;
  bottom: 46px;
  display: flex;
  justify-content: center;
  button {
    width: 343px;
    height: 44px;
  }
}
</style>